@import "../mixins.scss";
@import "../variable.scss";

.person__center {
  @include fullscreen;
  header {
    position: relative;
    height: 2.4rem;
    background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
    border-radius: 0 0 .5rem .5rem;
    .icon-user-edit {
      position: absolute;
      right: .2rem;
      top: .3rem;
      font-size: .2rem;
      color: #FFF;
    }
  }
  .container {
    position: absolute;
    left: .18rem;
    right: .18rem;
    top: 1rem;
    .info {
      position: relative;
      height: 2rem;
      box-shadow: 0 .08rem .16rem 0 rgba(0,0,0,0.08);
      border-radius: .08rem;
      background: #FFF;
      text-align: center;
      img {
        width: .94rem;
        height: .94rem;
        border: .01rem solid $bgColor;
        border-radius: 50%;
        margin-top: -.47rem;
      }
      &__name {
        margin-top: .12rem;
        font-size: .24rem;
        color: $dark-fontColor;
        line-height: .36rem;
      }
      &__star {
        position: absolute;
        top: .75rem;
        right: .3rem;
        width: .4rem;
        background-image: linear-gradient(180deg, #BEE700 0%, #8ACA00 100%);
        border-radius: .07rem;
        line-height: .15rem;
        .icon-star {
          margin: 0;
          display: inline-block;
          color: #FFC700;
          font-size: .12rem;
        }
        &__number {
          display: inline-block;
          font-size: .12rem;
          color: #FFF;
        }
      }
      &__id {
        margin-top: .02rem;
        font-size: .14rem;
        color: $tip-fontColor;
      }
    }
    .pocket {
      border-top: .01rem solid $content-bgColor;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: .12rem;
      height: .7rem;
      &__item {
        &__title {
          font-size: .12rem;
          color: $tip-fontColor;
        }
        &__desc {
          margin-top: .1rem;
          font-size: .2rem;
          color: $dark-fontColor;
        }
      }
    }
    .features {
      margin-top: .16rem;
      background: #FFF;
      box-shadow: 0 .08rem .16rem 0 rgba(0,0,0,0.08);
      border-radius: .08rem;
      .feature {
        display: flex;
        align-items: center;
        padding: .16rem;
        &__icon {
          width: .22rem;
          height: .22rem;
          line-height: .22rem;
          color: #FFF;
          border-radius: .08rem;
          text-align: center;
          font-size: .12rem;
        }
        .icon-money {
          background: $highlight-fontColor;
        }
        .icon-location {
          background: $btn-bgColor;
        }
        .icon-user {
          background: rgba(144,19,254,0.92);
        }
        &__title {
          flex: 1;
          margin-left: .12rem;
          font-size: .14rem;
          color: $dark-fontColor;
        }
        .icon-back {
          font-size: .12rem;
          transform: rotate(180deg);
          color: #C2C4CA;
        }
      }
    }
  }
}